<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <title>轨迹展示</title>
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <style type="text/css">
    .el-aside {
      color: #333;
      padding: 10px;
    }
    .el-main {
      color: #333;
      text-align: center;
    }
    /* baidu map */
    body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    #map_canvas{width:100%;height:100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    #result {width:100%}
    .lushu-box{
      position: absolute;
      left: 15px;
      top: 15px;
      z-index: 99
    }
    .lushu-box-text{
      background-color: #f5f5f5;
      height: 30px;
      font-size: 14px;
      color: #999;
      line-height: 30px;
      border-radius: 4px;
      padding: 0px 10px;
      margin: 6px 6px 6px 0;
      cursor: pointer;
    }
    .lushu-box-span {
      height: 42px;
      line-height: 42px;
      box-shadow: 0 1px 4px rgba(0,21,41,.12);
      padding: 0 15px;
      width: 335px;
      background: #fff;
    }
    .lushu-box-div{
      box-shadow: 0 1px 4px rgba(0,21,41,.12);
      padding: 15px;
      width: 334px;
      background: #fff;
      overflow: hidden;
      margin-top:8px 
    }
    .el-icon-all{
      background-image: url(../img/icon-all.png);
      padding: 9px;
      vertical-align: bottom;
    }
    .el-icon-company{
      background-image: url(../img/icon-company.png);
      padding: 9px;
      vertical-align: bottom;
    }
    .el-icon-vehicle{
      background-image: url(../img/icon-vehicle.png);
      padding: 9px;
      vertical-align: bottom;
    }
  </style>
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js" type="text/javascript"></script>
  <!-- import JavaScript -->
  <script src="../plugins/ElementUI/index-2.3.9.js" type="text/javascript"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
  <!-- map -->
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ePOIA9rln4os58j2HQnx3AW0Sdy9MiQv"></script>
  <script type="text/javascript" src="../js/LuShu.js"></script>
</head>
<body>
  <div id="appp" v-cloak class="animated fadeInRight">
    <div class="lushu-box">
      <div class="lushu-box-span">
          <el-row :gutter="20">
              <el-col :span="20">
                  <div class="lushu-box-text" @click="dialogVehicleVisible = true">{{plateNo?plateNo:'点击选择设备'}}</div>
              </el-col>
              <el-col :span="4" style="text-align:center;cursor:pointer">
                  <i :class="toggleSlider ?'el-icon-arrow-up':'el-icon-arrow-down'"  @click="toggleSlider = !toggleSlider"></i>
              </el-col>
            </el-row>
      </div>
      <el-collapse-transition>
        <div class="lushu-box-div" v-show="toggleSlider">
          <div class="transition-box">
            <el-date-picker
              v-model="TimeValue"
              type="datetimerange"
              align="center"
              size="small"
              style="width:335px;font-size: 12px"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy/MM/dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
            <div style="margin: 10px 0;text-align: center">
                <el-button type="primary" size="mini" icon="el-icon-search" @click="onSearch" :loading="loading">立即搜索</el-button>
            </div>
            <div style="margin: 15px 0;background: #e8e8e8;height: 1px;"></div>
            <div>
                <el-button type="primary" size="mini" @click="LoopClick(1)" plain>开始</el-button>
                <el-button type="primary" size="mini" @click="LoopClick(2)" plain>暂停</el-button>
                <el-button type="primary" size="mini" @click="LoopClick(3)" plain>停止</el-button>
                <el-button type="primary" size="mini" icon="el-icon-warning" @click="markStatus = !markStatus" plain>行驶信息</el-button>
                <div style="display: inline-block;vertical-align: middle;width: 250px;margin:15px 0px">
                  <el-slider v-model="speedL" :min="200" :max="2000" :step="200" :format-tooltip="formatTooltip"></el-slider>
                </div>
            </div>
            <!-- 驾驶行为分析 模块 -->
            <div style="margin: 15px 0;background: #e8e8e8;height: 1px;"></div>
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">驾驶行为分析</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkWraningPoint" @change="handleCheckedWraningPoint">
              <el-checkbox v-for="city in cities" :label="city.value" :key="city.value">{{city.label}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </el-collapse-transition>
    </div>
    <div id="map_canvas"></div> 
    <div class="markDynamic" v-show="markStatus">
      <p>接收时间：{{cycleList.time || "未知"}}</p>
      <p>速度：未知</p>
      <p>状态：未知</p>
      <p>位置：经{{cycleList.lng || " 未知"}} &nbsp; 纬{{cycleList.lat || " 未知"}}</p>
    </div>
    <el-dialog title="选择终端" :visible.sync="dialogVehicleVisible" width="500px">
      <el-tree
        :props="defaultProps"
        :load="loadNode"
        node-key="id"
        :default-expanded-keys="[0]"
        lazy
        ref="tree"
        @node-click="handleNodeClick">
          <!-- <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>
                  <i :class="node.icon"></i>&nbsp;{{ node.label }}
              </span>              
          </span> -->
      </el-tree>      
    </el-dialog>
  </div>
</body>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script src="../js/mars2baidu.js"></script>
  <script>
    var map,lushu,marker,mkrBus;
    var vm = new Vue({
      el: '#appp',
      data: function() {
        return { 
          windowHeight: (window.innerHeight||(document.documentElement && document.documentElement.clientHeight)||document.body.clientHeight) - 415,
          loading:false,
          formData:{},
          responsePoints:[],
          alarmLocation:[],
          arrPois:[],
          alarmPois:[],
          speedL:800,
          markStatus:true,
          cycleList:{},
          carImg:"../img/direction_r.png",
          warningIcon:"../img/driveAlarm.png",
          startIcon:"../img/dest_markers_01.png",
          endIcon:"../img/dest_markers_02.png",
          vinCode:"",
          // 以上不管
          defaultProps:{
            children: 'childDepartment',
            label: 'departmentName',
            isLeaf:'lastLeaf',
            type:'departmentType'
          },
          plateNo:"",
          TimeValue:[new Date().toLocaleDateString()+' 00:00:00',new Date().toLocaleDateString()+' 23:59:59'],//开始-结束时间
          toggleSlider: true,
          checkAll: false,
          checkWraningPoint: [],
          cities: [{label:'急加速',value:"sharpSpeedUp"}, {label:'急减速',value:"sharpSlowdown"}, {label:'急转弯',value:"sharpTurn"}],
          isIndeterminate: false,
          dialogVehicleVisible:false,
        }
      },
      mounted:function(){
        this.$nextTick(function(){
          this.showDefaultMap()//加载默认地图
        })
      },
      methods: {
          formatTooltip:function(val){
            return "回放速度："+val/800+"倍";
          },
          formatTime:function(){
            var startTime = this.TimeValue[0];
            var endTime = this.TimeValue[1];
            startTime = startTime.replace(/\//g,'-')
            endTime = endTime.replace(/\//g,'-')
            return [startTime,endTime]
          },
          // 异步加载组织
          responseSyncTree(id,callback){
            resourceRequst("/department/queryAllVehicleListInDepartment",{departmentId:id},function(res){
              if(typeof callback == "function") callback(res)
            },true)
          },
          loadNode(node, resolve) {
            var _this = this;
            if (node.level === 0) {
              var treeData = [{ 
                    departmentName: '上海同捷',
                    departmentType:1,
                    icon:"el-icon-all",
                    id: 0,
                    childDepartment:[]
                }]
              return resolve(treeData);
            }
            if(node.level !== 0){              
              setTimeout(() => {
                this.responseSyncTree(node.data.id,function(res){
                  var dataTree = [];
                  var department = res.departmentList;
                  var vehicle = res.vehicleList;
                  if(department && Object.keys(department).length){
                    _.each(department,function(value){
                      value.lastLeaf = false 
                      value.icon = "el-icon-company"
                      dataTree.push(value)
                    })
                  }
                  if(vehicle && Object.keys(vehicle).length){
                    _.each(vehicle,function(value){
                      value.departmentName = value.plateNo
                      value.departmentType = -1
                      value.lastLeaf = true 
                      value.icon = "el-icon-vehicle"
                      dataTree.push(value)
                    })
                  }
                  return  resolve(dataTree)
                })
              }, 500);
            }
          },
          handleNodeClick(data) {
            if(data.departmentType === -1){
              this.plateNo = data.plateNo
              this.vinCode = data.vinCode
              this.dialogVehicleVisible = false
            }
          },
          showDefaultMap:function(){
            map = new BMap.Map("map_canvas",{enableMapClick:false});    // 创建Map实例
            map.centerAndZoom(new BMap.Point(108.897597,34.457814),6);  // 初始化地图,设置中心点坐标和地图级别	  
            map.addControl(new BMap.MapTypeControl({
              mapTypes:[ BMAP_NORMAL_MAP,  BMAP_HYBRID_MAP]
            }));
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
          },
          showMap:function(){//显示 Baidu 地图
            // this.arrPois=[new BMap.Point(116.403984,39.914004),new BMap.Point(116.402116,39.913938),new BMap.Point(116.402116,39.913938),new BMap.Point(116.402046,39.913928),new BMap.Point(116.401856,39.913927),new BMap.Point(116.401547,39.913926),new BMap.Point(116.401008,39.913923),new BMap.Point(116.400599,39.913921),new BMap.Point(116.39999,39.913908),new BMap.Point(116.399471,39.913875),new BMap.Point(116.399042,39.913852),new BMap.Point(116.398035,39.913835),new BMap.Point(116.395593,39.913683),new BMap.Point(116.395383,39.913681),new BMap.Point(116.395114,39.913658),new BMap.Point(116.394666,39.913664),new BMap.Point(116.390265,39.91349),new BMap.Point(116.38925,39.913456),new BMap.Point(116.388931,39.913461),new BMap.Point(116.388643,39.913457),new BMap.Point(116.388335,39.913463),new BMap.Point(116.386455,39.913424),new BMap.Point(116.386166,39.913429),new BMap.Point(116.385898,39.913425),new BMap.Point(116.384327,39.913399),new BMap.Point(116.384168,39.913396),new BMap.Point(116.38384,39.913391),new BMap.Point(116.383472,39.913395),new BMap.Point(116.383323,39.913402),new BMap.Point(116.382796,39.913403),new BMap.Point(116.382747,39.913402),new BMap.Point(116.38227,39.913394),new BMap.Point(116.381594,39.913372),new BMap.Point(116.381465,39.91337),new BMap.Point(116.381445,39.913369),new BMap.Point(116.381197,39.913365),new BMap.Point(116.380779,39.913348),new BMap.Point(116.38066,39.913346),new BMap.Point(116.380491,39.913343),new BMap.Point(116.380488,39.913341),new BMap.Point(116.38014,39.913344),new BMap.Point(116.379435,39.913342),new BMap.Point(116.378848,39.913331),new BMap.Point(116.378103,39.913307),new BMap.Point(116.376722,39.913282),new BMap.Point(116.374238,39.913227),new BMap.Point(116.373105,39.913226),new BMap.Point(116.37221,39.91321),new BMap.Point(116.370004,39.913171),new BMap.Point(116.369865,39.913169),new BMap.Point(116.369706,39.913166),new BMap.Point(116.369616,39.913175),new BMap.Point(116.366474,39.913103),new BMap.Point(116.366276,39.913109),new BMap.Point(116.365997,39.913105),new BMap.Point(116.365898,39.913104),new BMap.Point(116.365639,39.91312),new BMap.Point(116.364605,39.913094),new BMap.Point(116.364127,39.913087),new BMap.Point(116.364126,39.913086),new BMap.Point(116.363917,39.913193),new BMap.Point(116.363827,39.913262),new BMap.Point(116.363797,39.913311),new BMap.Point(116.363767,39.913391),new BMap.Point(116.363767,39.913541),new BMap.Point(116.363757,39.913771),new BMap.Point(116.363757,39.913821),new BMap.Point(116.363737,39.91432),new BMap.Point(116.363687,39.914809),new BMap.Point(116.363647,39.915039),new BMap.Point(116.363617,39.915198),new BMap.Point(116.363567,39.915377),new BMap.Point(116.363527,39.915527),new BMap.Point(116.363487,39.915676),new BMap.Point(116.363438,39.915905),new BMap.Point(116.363436,39.915905),new BMap.Point(116.363327,39.916154),new BMap.Point(116.363327,39.916154),new BMap.Point(116.363356,39.916444),new BMap.Point(116.363376,39.916694),new BMap.Point(116.363504,39.917936),new BMap.Point(116.363404,39.918974),new BMap.Point(116.363384,39.919494),new BMap.Point(116.363374,39.919673),new BMap.Point(116.363374,39.919723),new BMap.Point(116.363374,39.919763),new BMap.Point(116.363374,39.919813),new BMap.Point(116.363364,39.920293),new BMap.Point(116.363364,39.920393),new BMap.Point(116.363273,39.922131),new BMap.Point(116.363263,39.922441),new BMap.Point(116.363192,39.92405),new BMap.Point(116.363183,39.92422),new BMap.Point(116.363183,39.9243),new BMap.Point(116.363173,39.92446),new BMap.Point(116.363122,39.925599),new BMap.Point(116.363112,39.925818),new BMap.Point(116.363072,39.926798),new BMap.Point(116.363052,39.927057),new BMap.Point(116.363042,39.927277),new BMap.Point(116.363002,39.928407),new BMap.Point(116.362952,39.929326),new BMap.Point(116.362952,39.929466),new BMap.Point(116.362942,39.929486),new BMap.Point(116.362842,39.931454),new BMap.Point(116.362822,39.931694),new BMap.Point(116.362822,39.931834),new BMap.Point(116.362802,39.932393),new BMap.Point(116.362772,39.933293),new BMap.Point(116.362763,39.933313),new BMap.Point(116.362683,39.934892),new BMap.Point(116.362603,39.936531),new BMap.Point(116.362544,39.93769),new BMap.Point(116.362524,39.93804),new BMap.Point(116.362514,39.938159),new BMap.Point(116.362514,39.938209),new BMap.Point(116.362514,39.938259),new BMap.Point(116.362504,39.938509),new BMap.Point(116.362465,39.939329),new BMap.Point(116.362405,39.940878),new BMap.Point(116.362376,39.941888),new BMap.Point(116.362366,39.942108),new BMap.Point(116.362366,39.942138),new BMap.Point(116.362356,39.942398),new BMap.Point(116.362337,39.942597),new BMap.Point(116.362307,39.943287),new BMap.Point(116.362277,39.943637),new BMap.Point(116.362218,39.944746),new BMap.Point(116.362219,39.946046),new BMap.Point(116.362219,39.946196),new BMap.Point(116.362219,39.946226),new BMap.Point(116.362209,39.946276),new BMap.Point(116.362209,39.946326),new BMap.Point(116.362199,39.946436),new BMap.Point(116.36218,39.946876),new BMap.Point(116.36213,39.947595),new BMap.Point(116.36227,39.948167),new BMap.Point(116.36235,39.948339),new BMap.Point(116.362509,39.948611),new BMap.Point(116.362738,39.948914),new BMap.Point(116.362928,39.949197),new BMap.Point(116.363167,39.94943),new BMap.Point(116.363416,39.949604),new BMap.Point(116.363913,39.949851),new BMap.Point(116.36469,39.950052),new BMap.Point(116.365595,39.950366),new BMap.Point(116.365794,39.950429),new BMap.Point(116.366093,39.950524),new BMap.Point(116.366242,39.950556),new BMap.Point(116.367266,39.950863),new BMap.Point(116.368162,39.951127),new BMap.Point(116.371174,39.952029),new BMap.Point(116.371324,39.952072),new BMap.Point(116.372029,39.952315),new BMap.Point(116.372417,39.952482),new BMap.Point(116.37365,39.953024),new BMap.Point(116.374435,39.953378),new BMap.Point(116.374833,39.953536),new BMap.Point(116.374962,39.953598),new BMap.Point(116.375588,39.95386),new BMap.Point(116.375585,39.95386),new BMap.Point(116.375903,39.953895),new BMap.Point(116.376171,39.95396),new BMap.Point(116.376399,39.954035),new BMap.Point(116.376648,39.954099),new BMap.Point(116.376727,39.954131),new BMap.Point(116.377026,39.954216),new BMap.Point(116.377085,39.954237),new BMap.Point(116.377354,39.954312),new BMap.Point(116.377642,39.954358),new BMap.Point(116.377821,39.954391),new BMap.Point(116.378198,39.954458),new BMap.Point(116.378377,39.954491),new BMap.Point(116.378536,39.954504),new BMap.Point(116.378586,39.954505),new BMap.Point(116.378715,39.954517),new BMap.Point(116.378924,39.954531),new BMap.Point(116.379311,39.954558),new BMap.Point(116.379848,39.954598),new BMap.Point(116.379898,39.954599),new BMap.Point(116.380037,39.954611),new BMap.Point(116.380723,39.954664),new BMap.Point(116.381458,39.954697),new BMap.Point(116.381736,39.954712),new BMap.Point(116.382432,39.954744),new BMap.Point(116.38273,39.954759),new BMap.Point(116.38279,39.95476),new BMap.Point(116.383098,39.954795),new BMap.Point(116.383456,39.954882),new BMap.Point(116.383536,39.954903),new BMap.Point(116.383576,39.954914),new BMap.Point(116.383655,39.954935),new BMap.Point(116.383695,39.954946),new BMap.Point(116.383795,39.954987),new BMap.Point(116.383854,39.955019),new BMap.Point(116.383884,39.955029),new BMap.Point(116.383954,39.95507),new BMap.Point(116.384013,39.955121),new BMap.Point(116.384063,39.955162),new BMap.Point(116.384093,39.955183),new BMap.Point(116.384153,39.955244),new BMap.Point(116.384212,39.955315),new BMap.Point(116.384242,39.955345),new BMap.Point(116.384382,39.955518),new BMap.Point(116.384441,39.955609),new BMap.Point(116.384501,39.95568),new BMap.Point(116.384581,39.955811),new BMap.Point(116.38468,39.955953),new BMap.Point(116.384849,39.956206),new BMap.Point(116.384919,39.956317),new BMap.Point(116.385059,39.956529),new BMap.Point(116.385079,39.95657),new BMap.Point(116.385347,39.956974),new BMap.Point(116.385527,39.957267),new BMap.Point(116.385576,39.957358),new BMap.Point(116.385626,39.957459),new BMap.Point(116.385676,39.95757),new BMap.Point(116.385716,39.95768),new BMap.Point(116.385776,39.957841),new BMap.Point(116.385806,39.958002),new BMap.Point(116.385836,39.958162),new BMap.Point(116.385846,39.958293),new BMap.Point(116.385846,39.958473),new BMap.Point(116.385856,39.958623),new BMap.Point(116.385856,39.958623),new BMap.Point(116.385897,39.960014),new BMap.Point(116.385898,39.960984),new BMap.Point(116.385908,39.961295),new BMap.Point(116.385929,39.961865),new BMap.Point(116.385909,39.962295),new BMap.Point(116.38588,39.963275),new BMap.Point(116.385831,39.963644),new BMap.Point(116.385782,39.964123),new BMap.Point(116.385782,39.964143),new BMap.Point(116.385842,39.964715),new BMap.Point(116.385903,39.965356),new BMap.Point(116.385983,39.966067),new BMap.Point(116.386043,39.966538),new BMap.Point(116.386053,39.966629),new BMap.Point(116.386133,39.96726),new BMap.Point(116.386414,39.969935),new BMap.Point(116.386474,39.970407),new BMap.Point(116.386685,39.9718),new BMap.Point(116.386805,39.972673),new BMap.Point(116.386935,39.973505),new BMap.Point(116.386985,39.973796),new BMap.Point(116.386984,39.973796),new BMap.Point(116.387035,39.974166),new BMap.Point(116.387055,39.974317),new BMap.Point(116.387075,39.974427),new BMap.Point(116.387095,39.974608),new BMap.Point(116.387175,39.975129),new BMap.Point(116.387185,39.975199),new BMap.Point(116.387195,39.975309),new BMap.Point(116.387285,39.975931),new BMap.Point(116.387385,39.976803),new BMap.Point(116.387626,39.978957),new BMap.Point(116.387646,39.979127),new BMap.Point(116.387656,39.979228),new BMap.Point(116.387736,39.979829),new BMap.Point(116.387866,39.981111),new BMap.Point(116.387926,39.981592),new BMap.Point(116.388026,39.982294), new BMap.Point(116.388016,39.982684),new BMap.Point(116.388007,39.982864),new BMap.Point(116.387997,39.982953),new BMap.Point(116.387997,39.983003),new BMap.Point(116.387997,39.983054),new BMap.Point(116.387987,39.983333),new BMap.Point(116.387918,39.983782)];
            var _this = this;
            var arrPois = this.arrPois;
            lushu && lushu.stop();
            map.clearOverlays();
            // 画线
            map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}));
            map.setViewport(arrPois);
            // 显示起始点
            this.showStartEndPoints()
            // 显示 驾驶行为分析
            this.showDrivingBehaviorAnalysis()
            // 初始化路书
            lushu = new BMapLib.LuShu(map,arrPois,{
              defaultContent:"",
              autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
              icon  : new BMap.Icon(this.carImg, new BMap.Size(26,26),{anchor : new BMap.Size(13, 13)}),
              speed: _this.speedL,
              enableRotation:true,//是否设置marker随着道路的走向进行旋转
              landmarkPois: [],
              callback:function(index){
                var data = {
                  time:_this.responsePoints[index].uploadTime,
                  lat:_this.responsePoints[index].lat,
                  lng:_this.responsePoints[index].lng
                }
                _this.cycleList = data
              }
            });
          },
          // 显示起始点坐标
          showStartEndPoints:function(){
            const eachList = [
                {
                    point: this.arrPois[0],
                    info: this.responsePoints[0],
                    icon: new BMap.Icon(this.startIcon, new BMap.Size(30, 32))
                },
                {
                    point: this.arrPois[this.arrPois.length - 1],
                    info: this.responsePoints[this.responsePoints.length-1],
                    icon: new BMap.Icon(this.endIcon, new BMap.Size(30, 32))
                }
            ]
            var geoc = new BMap.Geocoder();
            function addMarker(data) {
                var marker = new BMap.Marker(data.point, { icon: data.icon });
                map.addOverlay(marker);
                // 气泡 // 添加窗口信息
                var opts = {
                    width: 250
                };
                var infoWindow = null;
                geoc.getLocation(data.point, function (rs) {
                    var addComp = rs.addressComponents;
                    var address = `${addComp.province}${addComp.city}${addComp.district}${addComp.street}${addComp.streetNumber}`;
                    var innerText = `
                            <div>速度：${data.info.speed ? parseFloat(data.info.speed).toFixed(2) + "（km/h）" : '未知'}</div>
                            <div>时间：${data.info.uploadTime ? data.info.uploadTime : '未知'}</div>
                            <div>当前位置：${address ? address : '未知'}</div>
                        `;

                    infoWindow = new BMap.InfoWindow(innerText, opts); // 创建信息窗口对象
                });
                marker.addEventListener("click", function () {
                    map.openInfoWindow(infoWindow, data.point);
                });
            }
            for (var i = 0; i < eachList.length; i++) {
                addMarker(eachList[i]);
            }
          },
          // 显示 驾驶行为分析
          showDrivingBehaviorAnalysis:function(){
            var ariveAlarm = this.alarmPois;//报警集合
            var ariveFlag = this.alarmLocation;//报警集合未优化的
            var checkedList = this.checkWraningPoint;//驾驶行为选择集合
            var _this = this;
            
            if (ariveFlag.length && checkedList.length){//有报警点也选了行为 即显示勾选的报警点其他删除
              for(let arive in ariveAlarm){
                if(checkedList.indexOf(arive) !== -1){
                    showArive(ariveAlarm[arive],arive)
                }else{
                    deletePoint(arive)
                }
              }
            } else if (ariveFlag.length && checkedList.length == 0){//有报警点但是未选行为 即清空报警点
                deleteAllPoint()
            }else{
                return
            }

            function showArive(points,under) {
                let label = "";
                switch (under) {
                    case "sharpSlowdown":
                        label = "急加速";
                        break;
                    case "sharpTurn":
                        label = "急减速";
                        break;
                    case "sharpSpeedUp":
                        label = "急转弯";
                        break;
                    default:
                        break;
                }
                points.forEach(point => {
                    var myIcon = new BMap.Icon(_this.warningIcon, new BMap.Size(20, 20), { anchor: new BMap.Size(10, 10) });
                    var marker = new BMap.Marker(point, { icon: myIcon });
                    marker.ariveLabel = label;
                    map.addOverlay(marker);
                    marker.addEventListener("mouseover", function (event) {
                        let labelText = new BMap.Label(label,{offset:new BMap.Size(20,-10)})
                        labelText.setStyle({
                            border:"none",
                            color: "#333",
                            fontSize: "12px",
                            fontWeight: "700",
                            padding: "2px 10px",
                            borderRadius:"10px",
                            boxShadow: "rgb(188, 188, 187) 0px 3px 3px"
                        })
                        marker.setLabel(labelText)
                    });
                    marker.addEventListener("mouseout", function (event) {
                        map.removeOverlay(marker)
                        map.addOverlay(marker);
                    });
                })
            }
            function deletePoint(under) {
                let label = "";
                switch (under) {
                    case "sharpSlowdown":
                        label = "急加速";
                        break;
                    case "sharpTurn":
                        label = "急减速";
                        break;
                    case "sharpSpeedUp":
                        label = "急转弯";
                        break;
                    default:
                        break;
                }
                var allOverlay = map.getOverlays();
                for(var i=0;i<allOverlay.length;i++){
                    if (allOverlay[i].hasOwnProperty("ariveLabel") && allOverlay[i].ariveLabel == label){
                        map.removeOverlay(allOverlay[i]);
                    }
                }
            }
            function deleteAllPoint() {
                var allOverlay = map.getOverlays();
                for(var i=0;i<allOverlay.length;i++){
                    if (allOverlay[i].hasOwnProperty("ariveLabel")){
                        map.removeOverlay(allOverlay[i]);
                    }
                }
            }
          },
          //btn === 1(开始)===2(暂停)===3(停止)
          LoopClick:function(btn){
            switch(btn){
              case 1:
                  lushu && lushu.start()
                  break;
              case 2:
                  lushu && lushu.pause()
                  break;
              case 3:
                  lushu && lushu.stop()
                  break;
            }
          },
          /**
           * 以上不管
           * handleCheckAllChange,handleCheckedWraningPoint=> 驾驶行为分析相关 单选--全选
           * onSearch=> 立即搜索
          **/
          onSearch:function(){
            var _this = this;
            if(this.plateNo == ""){this.$message.warning('请先选择设备 !!');return}
            if(this.TimeValue && Object.keys(this.TimeValue).length){
              this.loading = true;
              var date = this.formatTime();
              var data={
                vin:this.vinCode,
                startTime:date[0],
                endTime:date[1]
              }              
              resourceRequst("/location/queryTraceByVinAndTime",data,function(res){
                _this.responsePoints = res.getResult;
                _this.loading = false
                if(res.alarmLocation.length){
                  _this.alarmLocation = res.alarmLocation;
                }
              },true)            
            }else{
              this.$message.warning('请选择开始-结束时间 !!');
              return
            }
          },
          handleCheckAllChange(val) {
            this.checkWraningPoint = val ? ["sharpSlowdown", "sharpTurn", "sharpSpeedUp"] : [];
            this.isIndeterminate = false;
            this.showDrivingBehaviorAnalysis()
          },
          handleCheckedWraningPoint(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            this.showDrivingBehaviorAnalysis()
          },
      },
      watch:{
        speedL:function(val){
          if(!lushu) return;
          lushu._opts.speed = val;
        },
        responsePoints:function(points){
          if(points.length === 0){
            this.$message('本时间段没有查询到轨迹信息');
            return
          }

          this.arrPois = _.map(points,function(item,index){
              var bdpoint = coordtransform.wgs84togbd09(item.lng,item.lat)
              return new BMap.Point(bdpoint[0],bdpoint[1]);
          })
          
          this.showMap()
        },
        alarmLocation:function(points){
          var alarmPois = {
            sharpSpeedUp:[],//急加速
            sharpSlowdown:[],//急减速
            sharpTurn:[]//急转弯
          }
          _.map(points,function(item,index){
              var bdpoint = coordtransform.wgs84togbd09(item.lng,item.lat)
              var point = new BMap.Point(bdpoint[0],bdpoint[1]);
              if(item.behaviorType == 1){//急加速
                alarmPois.sharpSpeedUp.push(point)
              }
              if(item.behaviorType == 2){//急减速
                alarmPois.sharpSlowdown.push(point)
              }
          })
          this.alarmPois = alarmPois
        }
      },
      updated:function(){
        
      }
    })
  </script>
</html>